<template>
	<view>
		<uni-popup v-if="loaded" ref="popup" type="bottom" :safeArea="safeArea" backgroundColor="#fff">
			<uni-nav-bar :title="$t('open')" :border="false" :rightText="$t('submit')" left-icon="left" @clickLeft="close" @clickRight="handleOpenClick" />
			<view class="open-form full-width">
				<uni-forms ref="form" :rules="rules" :modelValue="form">
					<!-- 描述 -->
					<uni-forms-item :label="$t('describe')" name="defectLogDescribe" required>
						<uni-easyinput type="textarea" 
							v-model="form.defectLogDescribe" 
							:placeholder="$t('defect.enter-describe')" 
							maxlength="255"
						/>
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {open} from "@/api/system/defect";
	/** 开启对话框 */
	export default {
		name: 'OpenPopup',
		model: {
			prop: 'defectId',
			event: 'input'
		},
		data() {
			return {
				form: {
					receiveBy: []
				},
				rules: {
					defectLogDescribe: { 
						rules: [
							{
								required: true,
								errorMessage: this.$t('defect.describe-cannot-empty')
							},
						],
					},
				},
			}
		},  
		props: {
			safeArea: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			loaded: function() {
				return this.$i18n.locale?true:false;
			},
		},
		methods: {
			/** 打开弹簧 */
			open(defect) {
				this.form = {
					defectId: defect.defectId,
					defectLogDescribe: null
				}
				if(this.$refs.popup) {
					this.$refs.popup.open('bottom');
				}
			},
			/** 关闭弹框 */
			close() {
				this.$refs.popup.close();
			},
			/** 处理提交指派功能 */
			handleOpenClick() {
				this.$refs.form.validate().then(valid => {
					open(this.form.defectId, this.form).then(res => {
						this.$modal.msgSuccess(this.$i18n.t('defect.start-success'));
						this.close();
						this.$emit('log', res.data);
					}).catch(err=>{
						uni.showToast({
							title: err
						})
					});
				}).catch(err=>{
					uni.showToast({
						title: err
					})
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.open-form {
		padding: 20rpx 40rpx;
	}
</style>